
var option = {
    title: {
        text: '',
        left: '4%',
        top: '5%',
        textStyle: {
            color: '#cccccc',
            fontSize: '18',
            fontWeight: 100,
        },

    },
    tooltip: {
        trigger: 'axis',
        axisPoiner: {
            type: 'shadow'
        }
    },
    // legend: {
    //     right: '10%',
    //     top: '5%',
    //     icon: 'rect',
    //     data: ['危险', '警告', '注意', '安全'],
    //     textStyle: {
    //         color: '#cccccc',
    //         fontWeight: 100,
    //     },
    //     selected: {
    //         '危险': true,
    //         '警告': true,
    //         '注意': true,
    //         '安全': true,
    //     }
    // },
    color: ['#e30f1e', '#f28329', '#96e8f6', '#3ec719'],
    xAxis: {
        nameLocation: 'center',
        type: 'category',
        boundaryGap: true,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        show: true,
        axisLabel: {
            textStyle: {
                color: '#999999'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        },
        axisTick: {
            show: true
        }
    },
    grid: {
        // top: '15%',
        // bottom: '5%',
        // left: '5%',
        x2:10,
        x:0,
        y2:10,
        y:10,
        containLabel: true
    },
    yAxis: {
        nameGap: 35,
        splitNumber: 10,
        type: 'value',
        min: '0',
        max: '100',
        axisLabel: {
            textStyle: {
                color: '#999999'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    series: [{
            name: '危险',
            type: 'line',
            animation: false,

            areaStyle: {
                normal: {
                    color: "#fff"
                }
            },
            itemStyle: {
                normal: {}
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markArea: {
                data: [
                    [{
                        yAxis: '0'
                    }, {
                        yAxis: '60'
                    }]
                ]
            },

        },
        {
            name: '警告',
            type: 'line',
            animation: false,
            areaStyle: {
                normal: {}
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markArea: {
                data: [
                    [{
                        yAxis: '60'
                    }, {
                        yAxis: '70'
                    }]
                ]
            },

        },
        {
            name: '注意',
            type: 'line',
            animation: false,
            areaStyle: {
                normal: {}
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markArea: {
                data: [
                    [{
                        yAxis: '70'
                    }, {
                        yAxis: '90'
                    }]
                ]
            },

        },
        {
            name: '安全',
            type: 'line',
            animation: false,
            areaStyle: {
                normal: {}
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markArea: {
                data: [
                    [{
                        yAxis: '90'
                    }, {
                        yAxis: '100'
                    }]
                ]
            },

        },
        {
            name: '',
            type: 'line',
            color:'#1291fb',
            data: [0, 3, 20, 73, 50, 3]
        }
    ]
};
var chart = echarts.init(document.getElementById('index2_echarts2'));
chart.setOption(option);